<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="btn">10</button>

    <script>

        var oBtn = document.getElementById('btn');

        // oBtn.onclick = function () {
        //     // 计时
        //     var t = setInterval(function () {
        //         oBtn.innerHTML++;
        //     }, 1000)
        // }



        // 定时器叠加的过程？？？
        // 15s   0ms   点击了一下，出现一个定时器      1s之后  ++    16s   0ms        1
        // 15s   20ms  点击了一下，又出现了一个定时器  1s之后   ++    16s  20ms       2
        //                                                 17s   0ms        3
        //                                                 17s   20ms       4



        // 解决方案
        //   1 点击的时候，检查一下是否已经点过了，如果已经点了就不再点


        var t;

        oBtn.onclick = function () {

            // 启动下一个定时器之前，清除之前的定时器
            if (t) clearInterval(t);

            t = setInterval(function () {
                oBtn.innerHTML--;
                if (oBtn.innerHTML == 0) {
                    clearInterval(t);

                }
            }, 1000)
        }


        // 声明一个全局变量  t   
        // 第一次点击的时候  t -> undefined   不需要清除    点击之后启动了定时器  t = 1 ;
        // 第二次点击的时候  全局变量t已经是1了  记录的是上一个定时器   所以先清除定时器  再启动下一个

        //  。。。。


        // 解决方案2
        //   启动下一个定时器之前，清除之前的定时器 ， 注意t设置为全局变量

        //   这种解决方案有个问题：一直点击的时候，事件一直不会被触发


    </script>

</body>

</html>